<template>
  <div class="mg-l-40 mg-t-20">
    <div style="font-size: 14px; font-weight: bold;">使用render函数实现展示文本</div>
    <br />
    <e-table :columns="columns" :data="data">
      <template #status="{ row }">
        <span>
          <e-tag size="large" :color="row.status" dark>{{ row.statusLabel }}</e-tag>
        </span>
      </template>
      <template #action="{ index }">
        <div class="btn" @click="print(index)">按钮</div>
      </template>
    </e-table>
  </div>
</template>

<script setup>
const columns = [
  {
    type: 'expand',
    width: 50,
    render: (h, { row: { content } }) => {
      return h('div', content)
    }
  },
  {
    title: '实例名称',
    key: 'name',
    resizable: true
  },
  {
    title: '状态',
    slot: 'status',
    resizable: true
  },
  {
    title: 'IP',
    key: 'ip',
    resizable: true
  },
  {
    title: '时间',
    key: 'time',
    resizable: true
  },
  {
    title: '地域',
    key: 'address',
    resizable: true
  },
  {
    title: '操作',
    slot: 'action',
    resizable: true
  },
]
const data = [
  {
    name: 'CPC-RP-TJ-01',
    status: 'success',
    statusLabel: '成功',
    ip: '123.11.234.2',
    time: '2017-10-20',
    address: '上海',
    content: '上海移动云产品边缘智能云EIC2022年迈入国内云厂商第一阵营，欢迎大家试用 ^-^。移动云产品边缘小站EIS公测进行中，欢迎大家试用 ^-^',
    _expanded: true,
  },
  {
    name: 'CPC-RP-TJ-02',
    status: 'primary',
    statusLabel: '进行中',
    ip: '123.11.234.2',
    time: '2017-10-20',
    address: '苏州',
    content: '苏州移动云产品边缘智能云EIC2022年迈入国内云厂商第一阵营，欢迎大家试用 -_-'
  },
  {
    name: 'CPC-RP-TJ-03',
    status: 'warning',
    statusLabel: '告警',
    ip: '123.11.234.2',
    time: '2017-10-20',
    address: '广州',
    content: '广州移动云产品边缘智能云EIC2022年迈入国内云厂商第一阵营，欢迎大家试用 -_-'
  },
  {
    name: 'CPC-RP-TJ-04',
    status: 'primary',
    statusLabel: '进行中',
    ip: '123.11.234.21',
    time: '2017-10-20',
    address: '苏州',
    content: '苏州移动云产品边缘智能云EIC2022年迈入国内云厂商第一阵营，欢迎大家试用 -_-'
  },
  {
    name: 'CPC-RP-TJ-05',
    status: 'warning',
    statusLabel: '告警',
    ip: '123.11.234.22',
    time: '2017-10-20',
    address: '广州',
    content: '苏州移动云产品边缘智能云EIC2022年迈入国内云厂商第一阵营，欢迎大家试用 -_-'
  },
]

const print = (index) => {
  // 一些逻辑操作逻辑
  console.log('click:', index);
}
</script>

<style scoped>
.btn {
  color: #1A6AFF;
  cursor: pointer;
}
</style>